<template>
  <div class="solutionInfo">
    <div class="left">
      <client-menu />
    </div>
    <div class="right">
      <div class="list" v-show="showList">
        <div v-for="(i, index) in dataList" class="item" :key="index" @click="getContent">
          <div class="name">{{ i.name }}</div>
          <div class="content">{{ i.content }}</div>
          <div class="arrowRight">
            <el-icon>
              <DArrowRight />
            </el-icon>
          </div>
        </div>
      </div>
      <div class="tabContent" v-show="!showList">
        <el-tabs v-model="activeName" class="demo-tabs" @tab-click="handleClick">
          <el-tab-pane label="新闻" name="first">
            <div v-for="(i, index) in dataList" :key="index" class="item">
              <div class="name">{{ i.name }}</div>
              <div class="content">{{ i.content }}</div>
              <div class="arrowRight"></div>
            </div>
          </el-tab-pane>
          <el-tab-pane label="产品" name="second">Config</el-tab-pane>
          <el-tab-pane label="解决方案" name="third">Role</el-tab-pane>
          <el-tab-pane label="服务与支持" name="fourth">Role</el-tab-pane>
          <el-tab-pane label="帮助中心" name="five">Task</el-tab-pane>
        </el-tabs>
      </div>
    </div>
  </div>
</template>
<script setup lang="ts">
import { ref } from "vue";
import clientMenu from "@/components/client-menu/left-menu.vue";
const showList = ref(true);
const dataList = ref<any>([
  {
    name: "云管理平台",
    content:
      "依照 GB/T 22239-2019《信息安全技术 网络安全等级保护基本要求》和《行业网络安全等级保护基本要求》对被测系统进行等级保护测评，确定不同等级业务系统当前安全防护现状，以及与国家和行业等级保护要求间的差距；分析其所面临的威胁及其存在的脆弱性，提出有针对性的抵御威胁的防护策略和整改措施。",
  },
  {
    name: "云管理平台",
    content:
      "依照 GB/T 22239-2019《信息安全技术 网络安全等级保护基本要求》和《行业网络安全等级保护基本要求》对被测系统进行等级保护测评，确定不同等级业务系统当前安全防护现状，以及与国家和行业等级保护要求间的差距；分析其所面临的威胁及其存在的脆弱性，提出有针对性的抵御威胁的防护策略和整改措施。",
  },
  {
    name: "云管理平台",
    content:
      "依照 GB/T 22239-2019《信息安全技术 网络安全等级保护基本要求》和《行业网络安全等级保护基本要求》对被测系统进行等级保护测评，确定不同等级业务系统当前安全防护现状，以及与国家和行业等级保护要求间的差距；分析其所面临的威胁及其存在的脆弱性，提出有针对性的抵御威胁的防护策略和整改措施。",
  },
  {
    name: "云管理平台",
    content:
      "依照 GB/T 22239-2019《信息安全技术 网络安全等级保护基本要求》和《行业网络安全等级保护基本要求》对被测系统进行等级保护测评，确定不同等级业务系统当前安全防护现状，以及与国家和行业等级保护要求间的差距；分析其所面临的威胁及其存在的脆弱性，提出有针对性的抵御威胁的防护策略和整改措施。",
  },
]);
const getContent = () => {
  showList.value = false;
};
import type { TabsPaneContext } from "element-plus";

const activeName = ref("first");

const handleClick = (tab: TabsPaneContext, event: Event) => {
  console.log(tab, event);
};
</script>
<style lang="less" scoped>
.solutionInfo {
  display: flex;

  .left {
    width: 194px;
  }

  .right {
    flex: 1;
    margin-left: 20px;
    justify-content: space-around;
    align-items: center;

    .item {
      width: 100%;
      border-radius: 5px;
      border: 1px solid #e7e9f1;
      background: linear-gradient(180deg, #f5f7fa 0%, #fff 100%);
      padding: 20px;
      margin-bottom: 20px;

      .name {
        color: #313131;
        font-family: PingFang SC;
        font-size: 18px;
        font-weight: 600;
        margin-bottom: 20px;
      }

      .content {
        color: #313131;
        font-family: PingFang SC;
        font-size: 14px;
      }

      .arrowRight {
        text-align: right;
      }
    }
  }
}
</style>
